<ion-header class="ion-no-border">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button>
        <ion-icon slot="icon-only" name="qr-code-outline"></ion-icon>
      </ion-button>
    </ion-buttons>

    <ion-title class="ion-text-center">
      @{{user.nickname}}
    </ion-title>

    <ion-buttons slot="end">
      <ion-button (click)="toggleMenu()">
        <ion-icon slot="icon-only" name="menu-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-refresher slot="fixed" style="--ion-text-color: var(--ion-color-medium);" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content pullingIcon="arrow-down-outline"></ion-refresher-content>
  </ion-refresher>

  <ion-list lines="none">
    <ion-item lines="none">
      <ion-avatar slot="start" style="width: 72px;height: 72px;">
        <img [src]="user.image">
      </ion-avatar>
      <ion-label>
        <h1 style="font-weight: bold;">{{user.full_name}}</h1>
        <h3>{{user.status}}</h3>
        <p style="vertical-align: middle;display: table-cell;">
          {{user.online ? 'online' : 'offline'}}
          <ion-icon name="phone-portrait-outline" size="small" color="primary"
            style="width: 14px;height: 14px;vertical-align: middle;" *ngIf="user.isMobileOnline">
          </ion-icon>
        </p>
      </ion-label>
    </ion-item>
  </ion-list>
</ion-content>